<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>留言板功能</title>
	<link rel="stylesheet" type="text/css" href="stylesheet/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="stylesheet/main.css">
    <style>
        html{
            background: url(./images/5.jpg) no-repeat;
            background-size:cover;
        }
        body{
            background: none;
        }
    </style>
</head>
<body>

	<div id="msgBox" style="display: block">
		<form>
			<div>
				<input type="text" id="userName" value="" class="f-text" />
				<p id="face">
					<img src="images/a1.jpg" class="current" />
					<img src="images/a2.jpg" />
					<img src="images/a3.jpg" />
					<img src="images/a4.jpg" />
				</p>
			</div>
			<div><textarea id="conBox" class="f-text"></textarea></div>
			<div class="tr">
				<p>
                    <input  type="button" id="sendBtn" value="返回首页" onclick="index()"/>
					<input id="sendBtn" class="send" type="button" value="发 送"  />
				</p>
			</div>
		</form>
		<div id="tab">
			<div class="list">
				<h3><span>留言板</span></h3>
				<ul>
					<li>
						<div class="userPic"><img src="images/a4.jpg"  style="width: 100%; height: 100%;"/></div>
						<div class="content">
							<div class="userName"><a href="javascript:;">成都小马哥</a>:</div>
							<div class="msgInfo">🙂</div>
							<div class="times">
                          
                                <a class="top" href="javascript:;">置顶</a>
								<a class="del" href="javascript:;">删除</a>
							</div>
						</div>
					</li>
					<li>
						<div class="userPic">	<img src="images/a1.jpg"  style="width: 100%; height: 100%;"/></div>
						<div class="content">
							<div class="userName"><a href="javascript:;">猜猜我是那个食物</a>:</div>
							<div class="msgInfo">吃吃吃</div>
							<div class="times">
                                <a class="top" href="javascript:;">置顶</a>
								<a class="del" href="javascript:;">删除</a>
							</div>
						</div>
					</li>
				</ul>
			</div>			
		</div>
	</div>

</body>
<script>
    function join(){
        msgBox.style.display="block"
        layer.style.display="none"
    }
    function index(){
     location.href="./index.html"
    }
    var send=document.querySelector(".send")
 function hq(){
    var del=document.querySelectorAll(".del")
    var top1=document.querySelectorAll(".top")
    for(let i=0;i<del.length;i++){
        del[i].onclick=function(){
          this.parentNode.parentNode.parentNode.remove()
        }
        top1[i].onclick=function(){
           
            this.parentNode.parentNode.parentNode.parentNode.insertBefore(this.parentNode.parentNode.parentNode,this.parentNode.parentNode.parentNode.parentNode.firstChild)
        }
    }
}
hq()
    var face=document.querySelectorAll("#face img")
    for(let i=0;i<face.length;i++){
        face[i].onclick=function(){
            for(let t=0;t<face.length;t++){
           face[t].classList.remove('current');
        }
        this.className="current"
     
        }
    }
    send.onclick=function(){
        
  var list=document.querySelector(".list ul")
   var liItem = document.createElement("li");
   list.insertBefore(liItem, list.firstChild);
   var div1 = document.createElement("div");
    div1.className = "userPic";
    var img1 = document.createElement("img");
    var imgsrc=document.querySelector(".current")
    img1.src=imgsrc.src
    img1.style.width="100%";
    img1.style.height="100%";
    div1.appendChild(img1);
    var div2 = document.createElement("div");
    var div3=document.createElement("div");
    var div4=document.createElement("div");
    var div5=document.createElement("div");
  
    div5.className="times"
 var a1=document.createElement("a")
 a1.className="top"
 a1.innerHTML="置顶"
 var a2=document.createElement("a")
 a2.className="del"
 a2.innerHTML="删除"
 div5.appendChild(a1)
 div5.appendChild(a2)

    div4.className="msgInfo"
    div4.innerHTML=":   "+conBox.value
    var a=document.createElement("a")
    a.innerHTML=userName.value
    a.style.cursor="pointer"
    div3.appendChild(a)
    div3.className="userName"
    div2.appendChild(div3)
    a1.style.cursor="pointer"
    a2.style.cursor="pointer"
    div2.appendChild(div4)
    div2.className = "content";
    liItem.appendChild(div1);
    liItem.appendChild(div2);
    div2.appendChild(div5)
    hq()
    }
</script>
</html>